<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 
        v-red指令，它可以让标题变成红色  v-red它是不是内置指令，需要开发者去定义
       -->
      <div v-red v-if="show">{{title}}</div>
      <hr />
      <!-- 在页面加载时，光标聚焦 -->
      <input type="text" v-focus />

    </div>
    <script>
      // 自定义指令它其实本质就是操作dom
      // 自定义指令分为 全局指令 和 局部指令
      // 全局指令的定义方式和局部指令定义的方式是一样的，只是使用的区域范围不一样
      const app = Vue.createApp({
        data() {
          return {
            title: '我是一个标题!',
            show: true
          }
        }
      })

      // 定义全局指令
      // 参数1：自定义指令的名称，不要加 v-  例：自定义指令为 v-red ，参数1就要写成  red
      // 参数2：对象  | 回调函数[对象方式简写]
      //  + 对象方式它有7个钩子函数，也可以称为自定义指令的生命周期，它是自定义指令绑定到标签中到此标签销毁这整个过程中它提供给开发者来添加自已额外代码回调函数
      // el 自定义指令绑定标签的dom对象
      // binding 自定义指令传递过来的数据对象
      // vnode 当前指定所有组件虚拟dom对象,它里面包含当前组件的实例
      // prevVnode 之前的虚拟dom对象  -- 一般用不到
      app.directive('red', {
        // ------- 挂载时，它们只会在初始化时执行，而且只执行1次
        // 在绑定元素的 attribute 前 或事件监听器应用前调用
        created(el, binding, vnode, prevVnode) {
          // console.log(el)
          // console.log(binding)
          // console.log(vnode)
          // console.log(prevVnode)
          // 给标签设置css样式
          // el.style.color = 'red'
          el.style.cssText = `color:red;
                              font-size: 20px;
                              font-weight: bold;`
        },
        // 在元素被插入到 DOM 前调用
        // beforeMount(el, binding, vnode, prevVnode) {},
        beforeMount(el) {},
        // 在绑定元素的父组件 及他自己的所有子节点都挂载完成后调用
        mounted(el, binding, vnode, prevVnode) {},

        // ------- 更新时执行，会执行N次
        // 绑定元素的父组件更新前调用
        beforeUpdate(el, binding, vnode, prevVnode) {},
        // 在绑定元素的父组件 及他自己的所有子节点都更新后调用
        updated(el, binding, vnode, prevVnode) {},

        // ------- 卸载时执行，执行1次
        // 绑定元素的父组件卸载前调用
        beforeUnmount(el, binding, vnode, prevVnode) {},
        // 绑定元素的父组件卸载后调用
        unmounted(el, binding, vnode, prevVnode) {}
      })

      app.directive('focus', {
        mounted(el) {
          el.focus()
        }
      })

      app.mount('#app')
    </script>
  </body>
</html>
